<div class="data-summary page-box">
    <h1><span><img src="../../image/title-summary.png"> </span></h1>
    <!--h1 end-->
    <div class="summary-con box-con">
        <div class="summary-buffer">
            <water-ball color="rgb(255, 76, 56)"
                        data="0.5"
                        icon="buffer"
                        icon-text="1h23m"
              ></water-ball>
            <span>每小时缓存时长比</span>
        </div>
        <div class="summary-play">
            <water-ball color="#3DCFFF"
                        data="0.3"
                        icon="play"
                        icon-text="15.63h"
              ></water-ball>
            <span>每小时播放时长</span>
        </div>
        <div class="summary-fluent">
            <water-ball color="#FFCC25"
                        data="0.8"
                        icon="fluent"
                        icon-text="98%"
              ></water-ball>
            <span>每小时流畅比率</span>
        </div>
        <div class="summary-nobuffer">
            <water-ball color="#24F1C5"
                        data="0.6"
                        icon="nobuffer"
                        icon-text="10%"
              ></water-ball>
            <span>每小时无缓存比率</span>
        </div>
    </div>
</div>